<template>
  <div>
    <el-table :data="data" border v-loading="loading">

      <el-table-column 
        v-for="col in showColumns"
        v-bind="col"
      >
        <template v-if="col.label==='操作'" #header>
          <el-popover placement="bottom" :width="80" trigger="click" :visible="visible">
            <template #reference>
              <span class="title" @click="visible = true">
                <span>操作</span>
                <el-icon size="18"><ArrowDown /></el-icon>
              </span>
            </template>
            
            <el-checkbox-group v-model="tempLabels">
              <el-checkbox v-for="col in cbColumns" :key="col.key" :label="col.label"></el-checkbox>
            </el-checkbox-group>
            
            <div>
              <el-button size="small" @click="cancel">取消</el-button>
              <el-button type="primary" size="small" @click="confirm">确定</el-button>
            </div>

          </el-popover>
        </template>
        <template v-if="col.slot" v-slot="{row}">
          <slot :name="col.slot" :row="row"></slot>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="pagination"
      class="mt-20"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      :page-sizes="[10, 20, 30, 40]"
      layout="prev, pager, next, jumper, ->, sizes, total"
      @current-change="getDataList"
      @size-change="getDataList"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts">
export default {
  name: 'XTable',
}
</script>

<script lang="ts" setup>
  import { computed, onMounted, ref } from 'vue';

  import {ArrowDown} from '@element-plus/icons-vue'

  // 页面卸载前的事件, 数据还可以读取
  window.addEventListener('beforeunload', () => {

  })


  const props = withDefaults(defineProps<{
    columns: any[];
    getData: (page: number, limit: number) => any;
    pagination: boolean;
  }>(), {
    pagination: true
  })



  const data = ref<any[]>([])
  const loading = ref(false)
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(0)

  // 请求列表数据显示
  async function getDataList() {
    loading.value = true
    const result = await props.getData(currentPage.value, pageSize.value)
    data.value = result.records
    total.value = result.total
    loading.value = false
  }

  onMounted(() => {
    getDataList()
  })

  const visible = ref(false)
  const checkedLabels = ref(props.columns.map(col => col.label))
  const tempLabels = ref(checkedLabels.value)

  // 计算过滤出要显示的colums
  const showColumns = computed(() => {
    return props.columns.filter(col => checkedLabels.value.includes(col.label))
    // return props.columns.filter(col => checkedLabels.value.some(label => label===col.label))
  })

  // 点击取消
  const cancel = () => {
    visible.value = false
    tempLabels.value = checkedLabels.value
  }

  // 点击确定
  const confirm = () => {
    visible.value = false
    checkedLabels.value = tempLabels.value
  }

  // 用于显示操作的选择列表
  const cbColumns = computed(() => {
    return props.columns.filter(col => col.label!=='操作')
  })
</script>

<style scoped>
.mt-20 {
  margin-top: 20px;
}

.title {
  width: 50px;
  display: flex;
  align-items: center;
}

.sku-img {
  width: 50px;
  height: 50px;
}
</style>
